<template>
	<div class="d-flex flex-column sidebar-dark-primary border-right border-secondary">
		<div v-for="(ctx, index) in contexts()" :key="ctx" :value="ctx">
			<b-overlay :show="showOverlay===ctx" rounded="sm">
				<b-overlay :show="showErrorOverlay===ctx" rounded="sm" variant="white">
					<template #overlay><b-icon icon="exclamation-circle-fill" font-scale="2" variant="danger"></b-icon></template>
					<b-button v-bind:id="'btn_aside_cluster_' + ctx" @click="onContextSelected(ctx)" v-bind:class="{current: ctx===currentContext()}" :value="ctx" class="w-100 text-uppercase" variant="secondary">{{ ctx.substring(0,1) }}</b-button>
				</b-overlay>
			</b-overlay>
			<p class="text-center text-white text-truncate">{{ctx}}</p>
			<b-popover v-bind:target="'btn_aside_cluster_' + ctx" :title="ctx" triggers="hover" boundary="window" boundary-padding="0">
				<ul class="list-unstyled m-0 p-0">
					<li v-if="ctx!==currentContext()"><b-link href="#" @click="onContextDelete(ctx, index)"><b-icon icon="x-circle" class="mr-1 text-danger"></b-icon>Remove</b-link></li>
					<li v-if="index!==0"><b-link href="#" @click="onMoveTop(index)"><b-icon icon="chevron-double-up" class="mr-1 "></b-icon>Top</b-link></li>
					<li v-if="index!==0"><b-link href="#" @click="onMoveUp(index)"><b-icon icon="caret-up-fill" class="mr-1 "></b-icon>Up</b-link></li>
					<li v-if="index<(contexts().length-1)"><b-link href="#" @click="onMoveDown(index)"><b-icon icon="caret-down-fill" class="mr-1"></b-icon>Down</b-link></li>
				</ul>
			</b-popover>
		</div>
		<div>
			<b-button id="btn_aside_add_cluster" variant="primary" to="/kubeconfig" class="w-100">+</b-button>
			<b-tooltip target="btn_aside_add_cluster" placement="right" boundary="window">Add a cluster</b-tooltip>
<!--			<b-tooltip target="btn_aside_add_cluster" placement="right" boundary="window">Add a cluster</b-tooltip>-->
      <b-tooltip target="btn_aside_add_cluster" placement="right" boundary="window">添加集群</b-tooltip>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			showOverlay: "",
			showErrorOverlay: "",
			list: [],
		}
	},
	async fetch() {
		if(!this.currentContext()) {

			// context 选择
			let ctx = this.$route.query.context ? this.$route.query.context: "";
			if (!ctx && localStorage.getItem("currentContext")!=null) ctx = localStorage.getItem("currentContext");

			// context list
			let equals = (a, b) => {
				if (!a) return false;
				if (!b) return false;
				if (a.length !== b.length) return false;
				for (let i=0; i < a.length; ++i) {
					let exist = b.find(v => v===a[i])
					if(!exist) return false;
				}
				return true;
			};

			this.$axios.get(`/api/contexts`)
				.then((resp)=>{
					if(resp.data.contexts) {
						let local;
						try { local = JSON.parse(localStorage.getItem("contexts")); } catch (e) {}
						if (equals(local,resp.data.contexts)) {
							this.contexts(local);
						} else {
							this.contexts(resp.data.contexts);
							localStorage.setItem("contexts",resp.data.contexts);
						}
					}
					if(!ctx) ctx = resp.data.currentContext;
					this.onContextSelected(ctx)
				}).catch(error=> {
					this.toast(error.message, "danger");
				})
		}
	},
	mounted() {
		this.$nuxt.$on("set-context-selected", this.onContextSelected);
	},
	methods: {
		// context select
		onContextLoad(ctx) {

			// context list
			let equals = (a, b) => {
				if (!a) return false;
				if (!b) return false;
				if (a.length !== b.length) return false;
				for (let i=0; i < a.length; ++i) {
					let exist = b.find(v => v===a[i])
					if(!exist) return false;
				}
				return true;
			};

			this.$axios.get(`/api/contexts`)
				.then((resp)=>{
					if(resp.data.contexts) {
						let local;
						try { local = JSON.parse(localStorage.getItem("contexts")); } catch (e) {}
						if (equals(local,resp.data.contexts)) {
							this.contexts(local);
						} else {
							this.contexts(resp.data.contexts);
							localStorage.setItem("contexts",resp.data.contexts);
						}
					}
					if(!ctx) ctx = resp.data.currentContext;
					this.onContextSelected(ctx)
				}).catch(error=> {
					this.toast(error.message, "danger");
				})
		},
		// context select
		onContextSelected(ctx) {
			if(this.contexts().length == 0) return;
			if(!ctx || !this.contexts().find(d=>d==ctx)) ctx = this.contexts()[0];
			this.showOverlay = ctx;
			this.showErrorOverlay = "";
			this.$axios.get(`/api/contexts/${ctx}`)
				.then((resp)=>{
					if (resp.data["error"]) {
						this.showErrorOverlay = ctx
						this.toast(resp.data["error"], "warning")
					} else {
						this.currentContext(ctx ? ctx : resp.data.currentContext.name);
						localStorage.setItem("currentContext", this.currentContext());
						this.$emit("input", resp.data);
					}
			}).catch(error=> {
				this.toast(error.message, "danger");
			}).finally(() => {
				this.showOverlay = "";
			});

		},
		onContextDelete(ctx, index) {
			this.confirm(`Delete a selected cluster "${ctx}" , Are you sure?`, yes => {
				if(!yes) return;
				this.$axios.delete(`/api/contexts/${ctx}`)
					.then( resp => {
						let contexts = []
						this.contexts().forEach( d => {
							if (d!==ctx) contexts.push(d)
						});
						this.contexts(contexts);
						this.toast("Delete a selected cluster...OK", "success");
					}).catch(e => { this.msghttp(e);});

			})
		},
		onMoveTop(index) {
			if (index === 0) return;
			var list = JSON.parse(JSON.stringify(this.contexts()))	// deep-copy
			list.splice(0, 0, list.splice(index,1)[0]);
			this.contexts(list);
			localStorage.setItem("contexts", JSON.stringify(list));
		},
		onMoveUp(index) {
			if (index === 0) return;
			var list = JSON.parse(JSON.stringify(this.contexts()))	// deep copy
			list.splice(index-1, 0, list.splice(index, 1)[0]);
			this.contexts(list);
			localStorage.setItem("contexts", JSON.stringify(list));
		},
		onMoveDown(index) {
			if (index === this.contexts().length - 1) return;
			var list = JSON.parse(JSON.stringify(this.contexts()))	// deep copy
			list.splice(index + 1, 0, list.splice(index, 1)[0]);
			this.contexts(list);
			localStorage.setItem("contexts", JSON.stringify(list));
		}
	}
}
</script>